<script setup lang="ts">
import { themeStore } from './store';
import { computed, CSSProperties, onMounted } from 'vue';

const useThemeStore = themeStore();

const tableHeaderBgColor = computed(() => {
  return useThemeStore.theme === 'dark' ? '#393939' : '#f6f6f6'
});

const tableHeaderTextColor = computed(() => {
  return useThemeStore.theme === 'dark' ? '#ffffffe6' : '#101d37'
});

onMounted(() => {
    useThemeStore.initTheme();
});

const style = computed<CSSProperties>(() => {
  return useThemeStore.gray ? {
    filter: 'grayscale(100%)'
  } : {}
});


</script>

<template>
    <RouterView :style></RouterView>
</template>

<style lang="scss">
::view-transition,
::view-transition-group {
    animation: none;
}


.t-pagination__pager .t-pagination__number.t-is-current {
  background-color: transparent !important;
  color: var(--td-brand-color) !important;
}

.t-dialog--default {
    padding: 20px 24px !important;
    border-radius: 2px !important;
}

.pro-table .t-table__header th {
    background-color: v-bind('tableHeaderBgColor') !important;
    color: v-bind('tableHeaderTextColor') !important;
    box-sizing: border-box;
}

.pro-table table {
  color: v-bind('tableHeaderTextColor') !important;
}
</style>
